<template>
	<view>
		<swiper class="swiper" autoplay="false" vertical="true" interval="990000" @change="changeVideo" @animationfinish="animationfinish">
			<swiper-item :key="index" v-for="(item,index) in videoList">
				<video
					:src="item.videoUrl"
					:show-play-btn="false"
					:controls="true"
					:loop="true"
					:page-gesture="true"
					:id="`video_${showType}_${item.videoId}`"
					object-fit="fill"
					:enable-danmu="danmu"
					:show-center-play-btn="true"
					:danmu-btn="danmu"
					:enable-progress-gesture="false"
					:show-fullscreen-btn="false"
					@click="clickVideo"
					play-btn-position="center"
					class="video"
					:danmu-list="item.danmuList"
					:poster="item.coverUrl"
					@timeupdate="timeupdate">
				</video>
				
				<cover-image 
				class="play" v-if="show_play" 
				@tap="videoPlay"
				src="/static/video/play_1.png"></cover-image>
				
				<cover-view class="cover-view-left">
					<cover-view class="view-left-text">@{{ item.publisher }}</cover-view>
					<cover-view class="view-left-text-content">
						<cover-view class="text-content-text">{{ item.videoDescribe?item.videoDescribe:item.title }}</cover-view>
					</cover-view>
				</cover-view>
				
				<cover-view class="cover-view-right">
					<cover-image :src="item.coverUrl"
					 class="avater img" 
					 @click.stop="tapAvater"></cover-image>
					
					<cover-view class="right-follow">+</cover-view>
					<cover-image 
					style="position:relative;top:-20rpx;"
					:src="item.likeFlag ? '/static/video/axc.png' : '/static/video/bed.png'" 
					class="img-left" @click.stop="tapLove"></cover-image>
					
					<cover-view class="right-text">{{ item.dianzan }}</cover-view>
					<cover-image src="/static/video/ay2.png" 
					style="height: 80rpx;" class="img-left" @click.stop="tapMsg"></cover-image>
					
					<cover-view class="right-text">{{ item.pinglun }}</cover-view>
					<cover-image src="/static/video/b6p.png" 
					style="height: 76rpx;" class="img-left" @click.stop="tapShare"></cover-image>
					<cover-view class="right-text">{{ item.zhuanfa }}</cover-view>
					<cover-view class="progressBar" :animation="animationData" ></cover-view>
				</cover-view>
			</swiper-item>
		</swiper>

	</view>
</template>
<script>
let play = false;
export default {
	props: {
		videoList: {
			type: Array,
			default(){
				return []
			}
		},
		danmu: {
			type: Boolean,
			default(){
				return false
			}
		},
		showType: {
			type: Number,
			default(){
				return 2
			}
		}
	},
	data() {
		return {
			time: 0,
			barWidth:0,
			animationData: {},
			times:null,
			play: false,
			show_play:false,
			current_index: 0
		};
	},
	created() {
		setTimeout(()=>{
			play = true;
			this.videoPlay();
		},1000)
	},
	methods: {
		timeupdate(event) {
			let t_w = parseInt(this.width);
			this.duration = event.detail.duration;
			this.time = event.detail.currentTime;
			let width = (this.time / this.duration) * t_w;
			let w = 0;
		},
		clickVideo() {
			// console.log('单视频点击事件');
			this.videoPlay();
		},
		videoPlay() {
			if(!this.videoList||this.videoList.length==0){
				return
			}
			console.log(123)
			let videoId = this.videoList[this.current_index].videoId;
			let showType = this.showType
			if (play) {
				console.log('播放视频',`video_${showType}_${videoId}`);
				this.videoCtx = uni.createVideoContext(`video_${showType}_${videoId}`, this);
				this.videoCtx.play();
				this.show_play = false;
				play = false;
			} else {
				console.log('暂停视频',`video_${showType}_${videoId}`);
				this.videoCtx = uni.createVideoContext(`video_${showType}_${videoId}`, this);
				this.videoCtx.pause();
				this.show_play = true;
				play = true;
			}
		},
		videoPause() {
			if(!this.videoList||this.videoList.length==0){
				return
			}
			let videoId = this.videoList[this.current_index].videoId;
			let showType = this.showType
			this.videoCtx = uni.createVideoContext(`video_${showType}_${videoId}`, this);
			this.videoCtx.pause();
			this.show_play = true;
			play = true;
		},
		changeVideo(e){
			
			// 暂停之前的视频
			this.videoPause();
			this.current_index = e.detail.current;
			console.log(e.detail.current);
			// 播放现在的视频
			this.videoPlay();
			
			// 判断是否第一条
			if( e.detail.current == 0 ){
				console.log('到顶了');
				return false;
			}
			
			// 判断是否最后一条
			if( e.detail.current == this.videoList.length-1 ){
				console.log('到底了');
				return false;
			}
			
		},
		animationfinish(e){
			// 判断是否第一条
			if( e.detail.current == 0 ){
				//刷新
				return false;
			}
			
			// 判断是否最后一条
			if( e.detail.current == this.videoList.length-1 ){
				//加载下一页数据
				return false;
			}
		},
		tapMsg(e) {
			console.log(5, e);
		},
		tapShare(e) {
			console.log(6, e);
		},
		tapLove(e) {
			// item.is_dianzan
			this.videoList[this.current_index].likeFlag = !this.videoList[this.current_index].likeFlag;
			console.log(7, e);
		}
		
	},
	watch: {
		play(newVal, oldVal) {
			this.videoPlay();
		}
	}
};
</script>

<style>
.swiper{
	width: 100vw;
	height: 100vh;	
	position: fixed;
	top: 0;
	left: 0;
}
.video {
	width: 100%;
	height: 100%;
	position: relative;
}
.play{
	position: absolute;
	width: 20vw;
	height: 20vw;
	left: 40vw;
	top: 40vh;
	opacity: 0.5;
}
.progressBar {
	border-radius: 2rpx;
	height: 4rpx;
	background-color: #FF4500;
	z-index: 999999;
	position: absolute;
	bottom: 68rpx;
}

.cover-view-left {
	position: absolute;
	margin-left: 20rpx;
	width: 580rpx;
	bottom: 110rpx;
	z-index: 9999;
	font-size: 14px;
	color: #ffffff;
}
.left-text {
	font-size: 14px;
	color: #ffffff;
}

.cover-view-right {
	position: absolute;
	bottom: 40px;
	right: 30rpx;
	z-index: 9999;
	text-align: center;
}

.avater {
	border-radius: 50%;
	border-width: 2px;
	border-style: solid;
	border-color: #ffffff;
}

.img {
	height: 90rpx;
	width: 90rpx;
	margin-bottom: 110rpx;
}

.img-left {
	width: 80rpx;
	height: 66rpx;
	padding-left: 4px;
}
.right-follow {
	position: absolute;
	z-index: 100;
	top: 75rpx;
	left: 28rpx;
	color: #ffffff;
	font-size: 16px;
	width: 34rpx;
	height: 34rpx;
	background-color: #f12f5b;
	text-align: center;
	line-height: 34rpx;
	border-radius: 17rpx;
}

.right-text {
	color: #ffffff;
	font-size: 11px;
	text-align: center;
	margin-bottom: 40rpx;
}
.musicIcon {
	margin-top: 40rpx;
}
@keyframes rotating {
	from {
		transform: rotate(0);
	}
	to {
		transform: rotate(360deg);
	}
}
.view-left-text-content {
	flex: 1;
}
.view-left-text {
	color: #ffffff;
	font-size: 30rpx;
	margin-bottom: 10rpx;
	font-weight: bold;
}
.text-content-text {
	color: #ffffff;
	font-size: 26rpx;
	line-height: 30rpx;
	height: 120rpx;
	overflow: hidden;
	word-break: break-all;
	word-wrap:break-word;
	white-space:pre-line;
	opacity:0.6;
}
</style>
